<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>后台管理-登陆</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta http-equiv="Access-Control-Allow-Origin" content="*">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<link rel="icon" href="images/favicon.ico">
		<link rel="stylesheet" href="./lib/layui-v2.6.3/css/layui.css" media="all">
		<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
		<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
		<style type="text/css">
			.main-body {
				top: 50%;
				left: 50%;
				position: absolute;
				-webkit-transform: translate(-50%, -50%);
				-moz-transform: translate(-50%, -50%);
				-ms-transform: translate(-50%, -50%);
				-o-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
				overflow: hidden;
			}

			.login-main .login-bottom .center .item input {
				display: inline-block;
				width: 227px;
				height: 22px;
				padding: 0;
				position: absolute;
				border: 0;
				outline: 0;
				font-size: 14px;
				letter-spacing: 0;
			}

			.login-main .login-bottom .center .item .icon-1 {
				background: url(./images/icon-login.png) no-repeat 1px 0;
			}

			.login-main .login-bottom .center .item .icon-2 {
				background: url(./images/icon-login.png) no-repeat -54px 0;
			}

			.login-main .login-bottom .center .item .icon-3 {
				background: url(./images/icon-login.png) no-repeat -106px 0;
			}

			.login-main .login-bottom .center .item .icon-4 {
				background: url(./images/icon-login.png) no-repeat 0 -43px;
				position: absolute;
				right: -10px;
				cursor: pointer;
			}

			.login-main .login-bottom .center .item .icon-5 {
				background: url(../images/icon-login.png) no-repeat -55px -43px;
			}

			.login-main .login-bottom .center .item .icon-6 {
				background: url(../images/icon-login.png) no-repeat 0 -93px;
				position: absolute;
				right: -10px;
				margin-top: 8px;
				cursor: pointer;
			}

			.login-main .login-bottom .tip .icon-nocheck {
				display: inline-block;
				width: 10px;
				height: 10px;
				border-radius: 2px;
				border: solid 1px #9abcda;
				position: relative;
				top: 2px;
				margin: 1px 8px 1px 1px;
				cursor: pointer;
			}

			.login-main .login-bottom .tip .icon-check {
				margin: 0 7px 0 0;
				width: 14px;
				height: 14px;
				border: none;
				background: url(./images/icon-login.png) no-repeat -111px -48px;
			}

			.login-main .login-bottom .center .item .icon {
				display: inline-block;
				width: 33px;
				height: 22px;
			}

			.login-main .login-bottom .center .item {
				width: 288px;
				height: 35px;
				border-bottom: 1px solid #dae1e6;
				margin-bottom: 35px;
			}

			.login-main {
				width: 428px;
				position: relative;
				float: left;
			}

			.login-main .login-top {
				height: 117px;
				background-color: #689d7f;
				border-radius: 12px 12px 0 0;
				font-family: SourceHanSansCN-Regular;
				font-size: 30px;
				font-weight: 600;
				font-stretch: normal;
				letter-spacing: 0;
				color: #fff;
				line-height: 117px;
				text-align: center;
				overflow: hidden;
				-webkit-transform: rotate(0);
				-moz-transform: rotate(0);
				-ms-transform: rotate(0);
				-o-transform: rotate(0);
				transform: rotate(0);
			}

			.login-main .login-top .bg1 {
				display: inline-block;
				width: 74px;
				height: 74px;
				background: #fff;
				opacity: .1;
				border-radius: 0 74px 0 0;
				position: absolute;
				left: 0;
				top: 43px;
			}

			.login-main .login-top .bg2 {
				display: inline-block;
				width: 94px;
				height: 94px;
				background: #fff;
				opacity: .1;
				border-radius: 50%;
				position: absolute;
				right: -16px;
				top: -16px;
			}

			.login-main .login-bottom {
				width: 428px;
				background: #fff;
				border-radius: 0 0 12px 12px;
				padding-bottom: 53px;
			}

			.login-main .login-bottom .center {
				width: 288px;
				margin: 0 auto;
				padding-top: 40px;
				padding-bottom: 15px;
				position: relative;
			}

			.login-main .login-bottom .tip {
				clear: both;
				height: 16px;
				line-height: 16px;
				width: 288px;
				margin: 0 auto;
			}

			body {
				background: url(./images/loginbg.jpg) 0% 0% / cover no-repeat;
				position: static;
				font-size: 12px;
			}

			input::-webkit-input-placeholder {
				color: #a6aebf;
			}

			input::-moz-placeholder {
				/* Mozilla Firefox 19+ */
				color: #a6aebf;
			}

			input:-moz-placeholder {
				/* Mozilla Firefox 4 to 18 */
				color: #a6aebf;
			}

			input:-ms-input-placeholder {
				/* Internet Explorer 10-11 */
				color: #a6aebf;
			}

			input:-webkit-autofill {
				/* 取消Chrome记住密码的背景颜色 */
				-webkit-box-shadow: 0 0 0 1000px white inset !important;
			}

			html {
				height: 100%;
			}

			.login-main .login-bottom .tip {
				clear: both;
				height: 16px;
				line-height: 16px;
				width: 288px;
				margin: 0 auto;
			}

			.login-main .login-bottom .tip .login-tip {
				font-family: MicrosoftYaHei;
				font-size: 12px;
				font-weight: 400;
				font-stretch: normal;
				letter-spacing: 0;
				color: #9abcda;
				cursor: pointer;
			}

			.login-main .login-bottom .tip .forget-password {
				font-stretch: normal;
				letter-spacing: 0;
				color: #1391ff;
				text-decoration: none;
				position: absolute;
				right: 62px;
			}

			.login-main .login-bottom .login-btn {
				width: 288px;
				height: 40px;
				background-color: #689d7f;
				border-radius: 16px;
				margin: 24px auto 0;
				text-align: center;
				line-height: 40px;
				color: #fff;
				font-size: 14px;
				letter-spacing: 0;
				cursor: pointer;
				border: none;
			}

			.login-main .login-bottom .center .item .validateImg {
				position: absolute;
				right: 1px;
				cursor: pointer;
				height: 36px;
				border: 1px solid #e6e6e6;
			}

			.footer {
				left: 0;
				bottom: 0;
				color: #fff;
				width: 100%;
				position: absolute;
				text-align: center;
				line-height: 30px;
				padding-bottom: 10px;
				text-shadow: #000 0.1em 0.1em 0.1em;
				font-size: 14px;
			}

			.padding-5 {
				padding: 5px !important;
			}

			.footer a,
			.footer span {
				color: #fff;
			}

			@media screen and (max-width:428px) {
				.login-main {
					width: 360px !important;
				}

				.login-main .login-top {
					width: 360px !important;
				}

				.login-main .login-bottom {
					width: 360px !important;
				}
			}
		</style>
	</head>
	<body>
		<div class="main-body">
			<div class="login-main">
				<div class="login-top">
					<span>实习就业登记系统登录</span>
					<span class="bg1"></span>
					<span class="bg2"></span>
				</div>
				<form class="layui-form login-bottom">
					<div class="center">
						<div class="item">
							<span class="icon icon-2"></span>
							<input type="text" name="username" lay-verify="required" placeholder="请输入登录账号"
								maxlength="24" />
						</div>

						<div class="item">
							<span class="icon icon-3"></span>
							<input type="password" name="password" lay-verify="required" placeholder="请输入登录密码"
								maxlength="20">
							<span class="bind-password icon icon-4"></span>
						</div>

						<div id="validatePanel" class="item" style="width: 137px;">
							<input type="text" name="captcha" placeholder="请输入验证码" maxlength="4">
							<img id="refreshCaptcha" class="validateImg" src="login?method=getCaptchar"
								onclick="refresh()">
						</div>

					</div>
					<div class="tip">
						<span class="icon-nocheck"></span>
						<span class="login-tip">保持2天登录</span>
						<a href="javascript:" class="forget-password">忘记密码？</a>
					</div>
					<div class="layui-form-item" style="text-align:center; width:100%;height:100%;margin:0px;">
						<button class="login-btn" lay-submit="" lay-filter="login">立即登录</button>
					</div>
				</form>
			</div>
		</div>
		<div class="footer">
			©版权所有 2020-2021 WEI.ZHOU<span class="padding-5">|</span><a target="_blank" href="http://www.xiaoandx.club">
				实现就业信息管理</a>
		</div>
		<script src="./lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
		<script src="./lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
		<script src="./js/api.js?t=2" charset="UTF-8"></script>
		<script type="text/javascript" src="./js/MD5Util.js"></script>
		<script>
		
		/* 用户登录对象：保持用户输入的登录信息 */
		var logins = {};
		
		/* 登录状态结果：记录登录响应数据 */
		var rest = {};
		
			/**
			 * @Description:	layui登录表单事件控制
			 * author: WEI.ZHOU
			 * @date: 2021-6-7 13:38:11
			 * @version: v1.0.0
			 */
			layui.use(['form', 'jquery'], function() {
				var $ = layui.jquery,
					form = layui.form,
					layer = layui.layer;

				// 登录过期的时候，跳出ifram框架
				if (top.location != self.location) top.location = self.location;

				$('.bind-password').on('click', function() {
					if ($(this).hasClass('icon-5')) {
						$(this).removeClass('icon-5');
						$("input[name='password']").attr('type', 'password');
					} else {
						$(this).addClass('icon-5');
						$("input[name='password']").attr('type', 'text');
					}
				});

				$('.icon-nocheck').on('click', function() {
					if ($(this).hasClass('icon-check')) {
						$(this).removeClass('icon-check');
					} else {
						$(this).addClass('icon-check');
					}
				});
				
				$('.forget-password').on('click', function(){
					layer.open({
						title: '忘记密码温馨提示',
					  type: 1,
					  area: ['400px', '140px'],
					  shadeClose: true, 
					  content: '\<\div style="font-size:18px;padding:20px;">忘记密码，请联系带班老师进行密码初始化\<\/div>'
					});
				})

				// 进行登录操作
				form.on('submit(login)', function(data) {
					data = data.field;
					if (data.username == '') {
						layer.msg('用户名不能为空');
						return false;
					}
					if (data.password == '') {
						layer.msg('密码不能为空');
						return false;
					}
					if (data.captcha == '') {
						layer.msg('验证码不能为空');
						return false;
					}
					
					var isLogindata = 0;
					if($('.icon-nocheck').hasClass("icon-check")){
						isLogindata = 1;
					}
					
					var logins = {
						"username":data.username,
						"password":hex_md5(data.password),
						"code":data.captcha,
						"isLogindata":isLogindata
					}
					login(logins);
					return false;
				});
				
				
			});

			/**
			  * @Description: 刷新验证码
			  * @author: WEI.ZHOU
			  * @date: 2021-6-9 3:45:38 ?F10: PM?
			  * @version: v1.0.0
			  */
			function refresh() {
				var date = new Date();
				var captcha = document.getElementById("refreshCaptcha");
				captcha.src = "login?method=getCaptchar&t=" +
					date.getTime();
			}
			
			/**
			  * @Description: 用户登录请求
			  * @author: WEI.ZHOU
			  * @param: data				登录表单数据
			  * @return: null				空
			  * @date: 2021-7-1 10:20:54 ?F10: AM?
			  * @version: v1.0.0
			  */
			function login(data){
				postHasData("/login?method=login",data).then(result =>{
					if(result.status == -1){
						layer.msg(result.message);
						refresh()
						return false;
					}
					if(result.status == -2){
						layer.msg(result.message);
						refresh()
						return false;
					}
					if(result.status == 1){
						layer.msg('登录成功', function() {
							window.location = './index.jsp';
						});
					}
				})
			}
			
		</script>
	</body>
</html>
